<template>
	<view class="container">
		<!-- 背景图片 -->
		<image class="bg-image" src="/static/bg.jpg" mode="aspectFill"></image>
		<!-- 自定义顶部栏 -->
		<view class="custom-navbar">
			<view class="navbar-title">听风试题</view>
			<view class="navbar-right"></view>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-row">
			<view class="search-box search-glass">
				<input 
					type="text" 
					v-model="searchText" 
					placeholder="请输入相关问题" 
					class="search-input"
				/>
			</view>
			<button class="search-btn">智能问答</button>
		</view>

		<!-- 课程选择卡片 -->
		<view class="card glass-effect">
			<view class="course-tabs">
				<view
					v-for="(tab, idx) in courseTabs"
					:key="tab.value"
					:class="['course-tab', {active: selectedTab === tab.value}]"
					@tap="selectedTab = tab.value"
				>
					{{ tab.label }}
				</view>
			</view>
			<view class="course-options">
				<view
					v-for="(option, idx) in getCurrentCourseOptions"
					:key="option.name"
					class="course-option"
					@tap="handleCourseOptionClick(option)"
				>
					<view class="option-icon">
						<image :src="option.icon" mode="aspectFit" />
					</view>
					<view class="option-label">{{ option.name }}</view>
				</view>
			</view>
		</view>

		<!-- 下载专区卡片 -->
		<view class="card glass-effect">
			<view class="download-tabs">
				<view
					v-for="(tab, idx) in downloadTabs"
					:key="tab.value"
					:class="['download-tab', {active: selectedDownloadTab === tab.value}]"
					@tap="selectedDownloadTab = tab.value"
				>
					{{ tab.label }}
					<view v-if="selectedDownloadTab === tab.value" class="tab-underline"></view>
				</view>
			</view>
			<view class="download-list">
				<view
					v-for="(file, idx) in getCurrentDownloadFiles"
					:key="file.name"
					class="download-item"
				>
					<view class="file-name">{{ file.name }}</view>
					<button class="download-icon-btn" @tap="handleDownload(file)">
						<image src="/static/icon-download.svg" mode="aspectFit" />
					</button>
				</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper 
			class="banner glass-effect" 
			circular 
			autoplay 
			interval="3000" 
			duration="500"
		>
			<swiper-item 
				v-for="(item, index) in bannerList" 
				:key="index"
			>
				<image :src="item.imageUrl" mode="aspectFill" class="banner-image" />
			</swiper-item>
		</swiper>

		<!-- banner -->
		<view class="banner-wrap">
			<image class="banner-img" src="/static/banner-bottom.png" mode="aspectFill" />
		</view>

		<!-- 登录弹窗 -->
		<login-modal :visible.sync="showLoginModal" />
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import LoginModal from '@/components/LoginModal.vue'

export default {
	components: {
		LoginModal
	},
	data() {
		return {
			searchText: '',
			showLoginModal: false,
			courseTabs: [
				{ label: '备战四级', value: 'cet4' },
				{ label: '备战六级', value: 'cet6' },
				{ label: '备战日语', value: 'jlpt3' },
				{ label: '备战软考', value: 'rk' }
			],
			selectedTab: 'cet4',
			courseOptions: {
				cet4: [
					{ name: '在线做题', icon: '/static/icon-edit.png', action: 'startExam' },
					{ name: '专题训练', icon: '/static/icon-topic.png' },
					{ name: '单词背诵', icon: '/static/icon-book.png' }
				],
				cet6: [
					{ name: '在线做题', icon: '/static/icon-edit.png' },
					{ name: '专题训练', icon: '/static/icon-topic.png' },
					{ name: '单词背诵', icon: '/static/icon-book.png' }
				]
			},
			downloadTabs: [
				{ label: '四级真题', value: 'cet4' },
				{ label: '六级真题', value: 'cet6' },
				{ label: '词汇', value: 'vocab' },
				{ label: '其他', value: 'other' }
			],
			selectedDownloadTab: 'cet4',
			downloadFilesMap: {
				cet4: [
					{ name: '小野英语-2024年12月大学英语四级真题卷一', url: '' },
					{ name: '小野英语-2024年12月大学英语四级真题卷二', url: '' },
					{ name: '小野英语-2024年12月大学英语四级真题卷三', url: '' },
					{ name: '小野英语-2024年6月大学英语四级真题卷一', url: '' },
					{ name: '小野英语-2024年6月大学英语四级真题卷二', url: '' }
				],
				cet6: [
					{ name: '小野英语-2024年12月大学英语六级真题卷一', url: '' },
					{ name: '小野英语-2024年6月大学英语六级真题卷一', url: '' }
				],
				vocab: [
					{ name: '四级核心词汇表', url: '' },
					{ name: '六级核心词汇表', url: '' }
				],
				other: [
					{ name: '四六级作文模板', url: '' }
				]
			},
			bannerList: [
				{ imageUrl: '/static/banner1.jpg' },
				{ imageUrl: '/static/banner2.jpg' },
				{ imageUrl: '/static/banner3.jpg' }
			]
		}
	},
	computed: {
		...mapState('user', ['isLoggedIn', 'userInfo']),
		getCurrentCourseOptions() {
			return this.courseOptions[this.selectedTab] || []
		},
		getCurrentDownloadFiles() {
			return this.downloadFilesMap[this.selectedDownloadTab] || []
		}
	},
	onShow() {
		// 如果未登录，显示登录弹窗
		if (!this.isLoggedIn) {
			this.showLoginModal = true
		}
	},
	methods: {
		...mapActions('user', ['login']),
		// 搜索方法
		handleSearch() {
			// TODO: 实现搜索功能，预留AI接口
			console.log('搜索内容：', this.searchText)
		},
		
		// 下载文件
		handleDownload(file) {
			// TODO: 实现文件下载逻辑
			console.log('下载文件：', file)
		},

		// 处理课程选项点击
		handleCourseOptionClick(option) {
			if (option.action === 'startExam') {
				uni.navigateTo({
					url: '/pages/exam/cet4/index'
				})
			}
		}
	}
}
</script>

<style lang="scss">
	.container {
		padding: 32rpx 20rpx 20rpx 20rpx;
		min-height: 100vh;
		position: relative;
		background: transparent;
	}
	
	.bg-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 24rpx;
		background: transparent;
		padding-top: calc(env(safe-area-inset-top) + 50px);
		box-sizing: border-box;
		margin-bottom: 60rpx;
	}
	.navbar-left {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}
	.navbar-title {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		color: #222;
		font-weight: bold;
		margin-left: 48rpx;
	}
	.navbar-right {
		width: 48rpx;
		height: 48rpx;
	}
	
	.glass-effect {
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.3);
		box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
	}

	// 搜索区
	.search-row {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
	}
	.search-box {
		flex: 1;
		height: 80rpx;
		display: flex;
		align-items: center;
		border-radius: 40rpx;
		box-shadow: 0 4rpx 16rpx 0 rgba(0,0,0,0.04);
		background: transparent;
		margin-right: 16rpx;
	}
	.search-glass {
		background: rgba(255,255,255,0.5);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	.search-input {
		flex: 1;
		border: none;
		outline: none;
		background: transparent;
		font-size: 30rpx;
		padding: 0 32rpx;
		color: #333;
	}
	.search-btn {
		height: 80rpx;
		min-width: 160rpx;
		padding: 0 32rpx;
		border-radius: 40rpx;
		background: #183c6b;
		color: #fff;
		font-size: 30rpx;
		border: none;
		box-shadow: 0 4rpx 16rpx 0 rgba(0,0,0,0.04);
	}

	// 卡片
	.card {
		border-radius: 32rpx;
		margin-bottom: 32rpx;
		padding: 32rpx 24rpx 24rpx 24rpx;
		box-shadow: 0 4rpx 24rpx 0 rgba(0,0,0,0.06);
		background: rgba(255,255,255,0.5);
		position: relative;
	}

	// 课程tab
	.course-tabs {
		display: flex;
		background: #f3f6fa;
		border-radius: 32rpx;
		padding: 8rpx;
		margin-bottom: 24rpx;
	}
	.course-tab {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #283b66;
		padding: 18rpx 0;
		border-radius: 28rpx;
		background: transparent;
		transition: background 0.2s, color 0.2s;
	}
	.course-tab.active {
		background: #283b66;
		color: #fff;
	}

	// 课程子项
	.course-options {
		display: flex;
		justify-content: space-around;
		margin-top: 16rpx;
	}
	.course-option {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.option-icon {
		width: 80rpx;
		height: 80rpx;
		background: #283b66;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12rpx;
	}
	.option-icon image {
		width: 48rpx;
		height: 48rpx;
	}
	.option-label {
		font-size: 26rpx;
		color: #283b66;
		margin-top: 2rpx;
	}

	// 下载专区
	.download-tabs {
		display: flex;
		border-bottom: 1px solid #eaeaea;
		margin-bottom: 12rpx;
	}
	.download-tab {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #283b66;
		padding: 18rpx 0 12rpx 0;
		position: relative;
		background: transparent;
	}
	.download-tab.active {
		font-weight: bold;
		color: #283b66;
	}
	.tab-underline {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 48rpx;
		height: 6rpx;
		background: #283b66;
		border-radius: 3rpx;
	}
	.download-list {
		margin-top: 8rpx;
	}
	.download-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}
	.download-item:last-child {
		border-bottom: none;
	}
	.file-name {
		font-size: 26rpx;
		color: #222;
		flex: 1;
		margin-right: 24rpx;
		word-break: break-all;
	}
	.download-icon-btn {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		background: #283b66;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		box-shadow: 0 2rpx 8rpx 0 rgba(24,60,107,0.08);
		padding: 0;
	}
	.download-icon-btn image {
		width: 32rpx;
		height: 32rpx;
	}

	.banner {
		height: 300rpx;
		border-radius: 10rpx;
		overflow: hidden;
		
		.banner-image {
			width: 100%;
			height: 100%;
		}
	}

	.banner-wrap {
		width: 100%;
		margin: 32rpx 0 0 0;
		display: flex;
		justify-content: center;
	}
	.banner-img {
		width: 92vw;
		height: 120rpx;
		border-radius: 32rpx;
		box-shadow: 0 4rpx 24rpx 0 rgba(24,60,107,0.08);
		object-fit: cover;
	}
</style>
